<template>
	<div class="bg-white solid padding-sm quick-group-box" style="width:100%;height: 310px !important;">
		<div class="title-box solid-bottom">
			<div class="content">业务流程</div>
			<div class="to"></div>
		</div>
		<div class="flex justify-center align-center flex-no-wrap">
			<div class="flex justify-start align-center flex-no-wrap">
				<div style="width: 750px;">
					<div class="flex justify-end align-center flex-wrap quick-items-box" style="width: 100%;height: 130px;padding-right: 0;">
						<div class="flex justify-center align-center flex-direction flex-no-wrap text-center">
							<div @click="toPageNew(1)" :class="['quick-item flex justify-center align-center flex-direction flex-no-wrap text-center', flowRights[0]?'':'quick-item-disable']">
								<svg-icon icon-class="dashboard-user" :style="{color:color[0]}" />
								<div class="quick-item-name">用户管理</div>
							</div>
						</div>
						<div class="arrow-line-1"></div>
						<div class="flex justify-center align-center flex-direction flex-no-wrap text-center">
							<div @click="toPageNew(2)" :class="['quick-item flex justify-center align-center flex-direction flex-no-wrap text-center', flowRights[0]?'':'quick-item-disable']">
								<svg-icon icon-class="dashboard-worker" :style="{color:color[1]}" />
								<div class="quick-item-name">工人管理</div>
							</div>
						</div>
						<div class="arrow-line-1"></div>
						<div class="flex justify-center align-center flex-direction flex-no-wrap text-center">
							<div @click="toPageNew(3)" :class="['quick-item flex justify-center align-center flex-direction flex-no-wrap text-center', flowRights[1]?'':'quick-item-disable']">
								<svg-icon icon-class="dashboard-building" :style="{color:color[2]}" />
								<div class="quick-item-name">创建项目</div>
							</div>
						</div>
						<div class="arrow-line-1"></div>
						<div class="flex justify-center align-center flex-direction flex-no-wrap text-center">
							<div @click="toPageNew(4)" :class="['quick-item flex justify-center align-center flex-direction flex-no-wrap text-center', flowRights[2]?'':'quick-item-disable']">
								<svg-icon icon-class="dashboard-consumer" :style="{color:color[3]}" />
								<div class="quick-item-name">录入客户</div>
							</div>
						</div>
					</div>
					<div class="flex justify-end align-center flex-wrap quick-items-box" style="width: 100%;height: auto;padding-right: 0;">
						<div class="flex justify-center align-center flex-direction flex-no-wrap text-center">
							<div @click="toPageNew(8)" :class="['quick-item flex justify-center align-center flex-direction flex-no-wrap text-center', flowRights[6]?'':'quick-item-disable']">
								<svg-icon icon-class="dashboard-install-order" :style="{color:color[7]}" />
								<div class="quick-item-name">安装工单</div>
							</div>
						</div>
						<div class="arrow-line-2"></div>
						<div class="flex justify-center align-center flex-direction flex-no-wrap text-center">
							<div @click="toPageNew(7)" :class="['quick-item flex justify-center align-center flex-direction flex-no-wrap text-center', flowRights[5]?'':'quick-item-disable']">
								<svg-icon icon-class="dashboard-order" :style="{color:color[6]}" />
								<div class="quick-item-name">销售单</div>
							</div>
						</div>
						<div class="arrow-line-2"></div>
						<div class="flex justify-center align-center flex-direction flex-no-wrap text-center">
							<div @click="toPageNew(6)" :class="['quick-item flex justify-center align-center flex-direction flex-no-wrap text-center', flowRights[4]?'':'quick-item-disable']">
								<svg-icon icon-class="dashboard-contract" :style="{color:color[5]}" />
								<div class="quick-item-name">销售合同</div>
							</div>
						</div>
						<div class="arrow-line-2"></div>
						<div class="flex justify-center align-center flex-direction flex-no-wrap text-center">
							<div @click="toPageNew(5)" :class="['quick-item flex justify-center align-center flex-direction flex-no-wrap text-center', flowRights[3]?'':'quick-item-disable']">
								<svg-icon icon-class="dashboard-point-plan" :style="{color:color[4]}" />
								<div class="quick-item-name">调度锁位</div>
							</div>
						</div>
						
					</div>
				</div>
				<div class="arrow-line-3"></div>
			</div>
			
			
		</div>
	</div>
</template>

<script>
	import common from '@/utils/common.js';
	import {
		isArray
	} from '@/utils/util.js'
	import {
		cloneDeep
	} from 'lodash'
	export default {
		name: 'DashboardQuickGroup',
		components: {},
		beforeDestroy() {
		},
		// beforeRouteLeave(to, from, next) {
		// 	this.$destroy();
		// 	next();
		// },
		data() {
			return {
				grayColor: '#aaaaaa',
				color: ['#0081ff', '#f37b1d', '#39b54a', '#fbbd08', '#1cbbb4', '#e54d42', '#6739b6', '#8dc63f', '#a5673f'],
				flowRights:[true, true, true, true, true, true, true, true, true],
			}
		},
		computed:{
		},
		mounted() {
			this.checkRights();
		},
		methods: {
			checkRights(){
				const that = this;
				that.$store.dispatch("permission/checkRights", {
					names: [
						'user', 
						'building_area_list', 
						'customer_manage', 'my_customer',
						'purpose_plan', 
						'contract_list', 'contract_my',
						'sale_order_list', 'sale_order_my',
						'install_order'],
					rights: that.$store.getters.rights
				}).then((results) => {
					console.log(results);
					that.flowRights = Object.assign(that.flowRights, [
						results[0],
						results[0],
						results[1],
						results[2] || results[3],
						results[4],
						results[5] || results[6],
						results[7] || results[8],
						results[9]
					])
				})
			},
			async toPageNew(type){
				const that = this;
				if(type == 1){
					// 用户管理
					const flag1 = await that.$store.dispatch("permission/checkRight", {
						name: 'user',
						rights: that.$store.getters.rights
					});
					if(!!flag1) {
						that.$router.push({name: 'user'});
						return false;
					}
				}else if(type == 2){
					// 工人管理
					const flag1 = await that.$store.dispatch("permission/checkRight", {
						name: 'user',
						rights: that.$store.getters.rights
					});
					if(!!flag1) {
						that.$router.push({name: 'user'});
						return false;
					}
				}else if(type == 3){
					// 创建楼盘
					const flag1 = await that.$store.dispatch("permission/checkRight", {
						name: 'building_area_list',
						rights: that.$store.getters.rights
					});
					if(!!flag1) {
						that.$router.push({name: 'building_area_list'});
						return false;
					}
				}else if(type == 4){
					// 录入客户
					const flag1 = await that.$store.dispatch("permission/checkRight", {
						name: 'customer_manage',
						rights: that.$store.getters.rights
					});
					if(!!flag1) {
						that.$router.push({name: 'customer_manage'});
						return false;
					}
					
					const flag2 = await that.$store.dispatch("permission/checkRight", {
						name: 'contract_my',
						rights: that.$store.getters.rights
					});
					if(!!flag2) {
						that.$router.push({name: 'contract_my'});
						return false;
					}
				}else if(type == 5){
					// 调度锁位
					const flag1 = await that.$store.dispatch("permission/checkRight", {
						name: 'purpose_plan',
						rights: that.$store.getters.rights
					});
					if(!!flag1) {
						that.$router.push({name: 'purpose_plan'});
						return false;
					}
				}else if(type == 6){
					// 合同录入
					const flag1 = await that.$store.dispatch("permission/checkRight", {
						name: 'contract_list',
						rights: that.$store.getters.rights
					});
					if(!!flag1) {
						that.$router.push({name: 'contract_list'});
						return false;
					}
					
					const flag2 = await that.$store.dispatch("permission/checkRight", {
						name: 'contract_my',
						rights: that.$store.getters.rights
					});
					if(!!flag2) {
						that.$router.push({name: 'contract_my'});
						return false;
					}
				}else if(type == 7){
					// 销售单
					const flag1 = await that.$store.dispatch("permission/checkRight", {
						name: 'sale_order_list',
						rights: that.$store.getters.rights
					});
					if(!!flag1) {
						that.$router.push({name: 'sale_order_list'});
						return false;
					}
					
					const flag2 = await that.$store.dispatch("permission/checkRight", {
						name: 'sale_order_my',
						rights: that.$store.getters.rights
					});
					if(!!flag2) {
						that.$router.push({name: 'sale_order_my'});
						return false;
					}
				}else if(type == 8){
					// 安装工单
					const flag1 = await that.$store.dispatch("permission/checkRight", {
						name: 'install_order',
						rights: that.$store.getters.rights
					});
					if(!!flag1) {
						that.$router.push({name: 'install_order'});
						return false;
					}
				}
				common.messageWarning('您没有该权限！');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.quick-group-box {
		
		.arrow-line-1 {
			width: 80px;
			height: 0;
			border: 1px solid #999;
			position: relative;
		}
		
		.arrow-line-1::after {
			content: '';
			border: 6px solid transparent;
			border-left: 20px solid #999;
			width: 0;
			height: 0;
			position: absolute;
			bottom: -6px;
			right: -10px;
		}
		
		.arrow-line-2 {
			width: 80px;
			height: 0;
			border: 1px solid #999;
			position: relative;
		}
		
		.arrow-line-2::after {
			content: '';
			border: 6px solid transparent;
			border-right: 20px solid #999;
			width: 0;
			height: 0;
			position: absolute;
			bottom: -6px;
			left: -10px;
		}
		
		.arrow-line-3 {
			margin-top: 10px;
		    width: 60px;
		    height: 130px;
		    border: 2px solid #999;
		    border-radius: 0 80% 80% 0 / 50% 50% 50% 50%;
		    border-left: none;
			position: relative;
		}
		
		.arrow-line-3::after {
			content: '';
			border: 6px solid transparent;
			border-right: 20px solid #999;
			width: 0;
			height: 0;
			position: absolute;
			bottom: -7px;
			left: -10px;
		}
		
		.arrow-left {
		  border: 5px solid transparent;
		  border-left: 20px solid #999;
		  width: 0;
		  height: 0;
		}

		.quick-items-box {
			height: 188px;
			padding: 0 20px;

			.quick-item {
				position: relative;
				width: 100px;
				height: 100px;
				padding: 5px;
				margin: 0 10px 10px;
				border-radius: 10px;
				border: 1px solid #eee;

				svg {
					padding: 5px;
					width: 80px;
					height: 80px;
				}

				.quick-item-name {
					font-size: 14px;
					// font-weight: bold;
				}

				&:hover {
					cursor: pointer;
					border-color: #ccc;
					box-shadow: 2px 2px rgba(230, 230, 230, 0.1) inset;
				}
				
				.quick-item-number-tip{
					position: absolute;
					background-color: #e54d42;
					border-radius: 100%;
					top: -9px;
					right: -9px;
					width: 20px;
					height: 20px;
					color: white;
					text-align: center;
					
					div{
						font-size: 12px !important;
					}
				}
				
				&.quick-item-disable{
					background-color: #eee;
					
					svg{
						color: #999 !important;
					}
				}
			}


		}
	}
</style>
